
//固定常量
$height : 100vh;
$min-width : 1200px;


.population{
    width: 100%;
    min-width: 1300px;
    margin: 0 auto;
    .header{ 
        position: relative;
        width : 860 / 1920 * 100%;
        height: 80px;
        margin: 0 auto;
        background: url('../assets/img/header-bg.png') center 0px no-repeat;
        background-size: 100% 100%;
        h1 {
          font-size: 32px;
          color: #49d9fe;
          font-weight: 600;
          line-height: 96px;
          text-align: center;
          margin-top: -10px;
        }
    }
    
    .container{
        position: relative;
        width: 1860 / 1920 * 100%;
        min-width: $min-width;
        height: 940 / 1080 * $height;
        margin: 0 auto;
        margin-top: 10px;
        .left,.center,.right{
            float: none;
            &>div{
                width: 100%;
            }
        }
        .left,.right{
            width: 452 / 1920 * 100%; 
            height: 100%;
        }
        .center{
            width: 985 / 1920 * 100%;
        }
    }
    .left{
        position: absolute;
        top: 0;
        left: 0;
    }
    .right{
        position: absolute;
        top: 0;
        right: 0;
    }
}




.left{
    .application{
        height: 100%;
    }
    .application-top{
        width: 92%;
        height: 30%;
        margin: 0 auto;
    }
}





.center{
    height: 100%;
    margin: 0 auto;
    .interface{
        height: 60%;
        margin: 0 auto;
        .radios{
            top: 4%;
        }
    }
    .interface-num{
        height: 38%;
        margin: 14px auto 0;
        .radios{
            top: 5%;
        }
    }
    .interface-list{
        position: relative;
        top: 4%;
        width: 96%;
        margin: 0 auto;
    }
    ul{
        font-size: 0;
    }
    .interface-li{
        position: relative;
        display: inline-block;
        width: calc(100% / 8);
        vertical-align: middle;
        text-align: center;
        &:after{
            position: absolute;
            top: 24px;
            left: calc(50% + 25px);
            display: block;
            content: '';
            width: calc(100% - 50px);
            height: 2px;
            background-color: #00ffff;
        }
        &:last-of-type::after{
            display: none;
        }
        .icon{
            width: 50px;
            height: 50px;
            line-height: 50px;
            color: #fff;
            font-size: 18px;
            border: 1px solid #00ffff;
            border-radius: 50%;
            margin: 0 auto 5px;
            box-sizing: border-box;
        }
        .text{
            color: #fff;
            font-size: 14px;
            line-height: 20px;
            text-align: center;
        }
    }
    .table-container{
        position: relative;
        top: 7%;
        width: 96%;
    }
    .interface-chart{
        width: 96%;
        height: 82%;
        margin: 0 auto;
    }
}

.right{
    .department{
        height: 100%;
        margin: 0 auto;
    }
    .department-pie{
        position: relative;
        width: 93%;
        height: 400 / 960 * 100%;
        margin: 0 auto;
    }
    .table-container{
        top: 2%;
    }
}


.table-container{
    position: relative;
    top: 20 / 940 * 100%;
    width: 92%;
    margin: 0 auto;
}


.radios {
    position: relative;
    top: 3%;
    line-height: 40px;
    font-size: 0;
    text-align: center;
    .el-radio {
      margin-left: 14px !important;
    }
    .el-radio__label {
      color:#fff !important;
      font-size: 10px;
      padding-left: 4px;
    }
    .el-radio__inner {
       background-color: #0055a9;
       border : none;
    }
    .el-radio__inner::after{
        width: 6px;
        height: 6px;
    }
}


